import {
  Form,
  Field,
  Cell,
  Button
} from 'vant'

export default {
  components: {
    Form,
    Field,
    Cell,
    Button
  },
  props: {
    value: {
      default: ''
    },
    info: {
      type: Object,
      default: Object
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      currentValue: '',
      currentValueLabel: ''
    }
  },
  computed: {
    // 校验prop
    name () {
      let o = this.info
      return o.key
    },
    // label
    label () {
      let o = this.info
      return o.label
    },
    // 类型：input、password等register.js注册的类型
    type () {
      let o = this.info
      return o.type || ''
    },
    // 默认 90 或者 '90px'
    labelWidth () {
      let o = this.info
      return o.labelWidth || this.$parent.labelWidth
    },
    // 通过disabled将输入框设置为禁用状态
    disabled () {
      let o = this.info
      return o.disabled || false
    },
    // placeholder
    placeholder () {
      let o = this.info
      let p = ['select', 'checkbox', 'radio'].includes(o.type) ? `请选择${o.label}` : `请输入${o.label}`
      if (this.showType === 'view') {
        p = ''
      }
      return o.placeholder || p
    },
    // 是否进行校验
    rules () {
      let {
        pattern,
        rules,
        label,
        type
      } = this.info
      if (rules === true) {
        let txt = ['select', 'checkbox', 'radio'].includes(type) ? `请选择` : `请输入`
        return pattern ? [{
          required: true,
          message: `${txt}${label}`
        }, {
          message: `${txt}正确${label}`,
          pattern
        }] : [{
          required: true,
          message: `${txt}${label}`
        }]
      } else if (Array.isArray(rules)) {
        return rules
      }
      return []
    },
    // 校验法则
    pattern () {
      let o = this.info
      return o.pattern || ''
    },
    // 展现类型：edit、view
    showType () {
      let o = this.info
      return o.showType || 'edit'
    },
    // 展现类型：edit、view
    readonly () {
      let o = this.info
      let readonly = o.showType === 'view'
      return o.readonly || readonly
    },
    // 列表：单选多选组、下拉框、picker
    list () {
      let o = this.info
      let list = o.list || []
      if (Array.isArray(list)) {
        return list
      } else if (typeof list === 'object') {
        return Object.entries(list).map(([value, label]) => ({
          value,
          label
        }))
      } else {
        return [list]
      }
    },
    // 表单右侧箭头：up、right、down、left
    arrow () {
      let o = this.info
      if (o.arrow === 'right') {
        return ''
      }
      return o.arrow || 'right'
    }
  },
  watch: {
    value: {
      handler (v) {
        this.currentValue = v
      },
      immediate: true
    }
  },
  methods: {
    // 显示类型为查看时：对值显示的操作（如 100 => 1元 => ¥1 ）
    viewValueFn (v) {
      let foo = this.info.viewValueFn || (i => i)
      return foo(v)
    },
    // 还有list的表单项：对值显示的操作（配合list使用，如 [{ 0: '启用' }]中的 0 => 启用 ）
    viewLabel (v) {
      let list = this.list
      let o = list.length && list.find(o => o.value === v)
      return o ? o.label : v
    },
    // 父级修改表单项的值
    setValue (v) {
      this.currentValue = v
      this.$emit('change', v, this.name)
    }
  }
}
